<template>
    <div class="termsBox">
        <!-- header -->
        <div class="raiders-header">
            <div class="header-right">
                <input type="text" placeholder="关键词搜索" v-model="wordSearch">
                <img src="../../static/image/icon-search.png" alt="" class="search-icon" @click="search">
            </div>
            <div class="clear searchLine" v-if="entryList.length == ''">搜索“<span class="red">{{wordSearch}}</span>”</div>
            <div class="clear searchLine">搜索“<span class="red">{{wordSearch}}</span>” 共{{this.entryList.length}}个结果 </div>
        </div>
        <!-- header end-->
        <!-- 理论工具 -->
        <div class="toolsBox">
            <div class="public-header">
              <h2 class="public-header-ch">理论工具</h2>
              <p class="public-header-en">THEORIES TOOLS</p>
              <div class="public-header-line"></div>
            </div>
            <div class="toolsListAll">
                <ul>
                    <li v-if="theoryList.length == '' " style="text-align:center">
                        很抱歉，没有找到与" <span class="red">{{wordSearch}}</span>"相关的内容。
                    </li>
                    <li class="clear" v-for="item in theoryList" :key="item.id">
                        <div class="line-title">
                            <div class="title-left">
                                <h3 class='search-highlight-tools'>{{item.title}}</h3>
                                <div class="left-line"></div>
                            </div>
                            <div class="title-right" >
                                <b>关键词：</b>
                                <span class="search-highlight-tools" v-for="taglist in item.tags" :key="taglist">{{taglist.tagName}}</span>
                            </div>
                        </div>
                        <div class="line-more clear">
                            <router-link to="toolList">查看更多 》</router-link>
                        </div>
                        <div class="line-content search-highlight-tools">
                            {{item.content}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 理论工具 end-->

        <!-- 相关词条 -->
        <div class="toolsBox">
            <div class="public-header">
              <h2 class="public-header-ch">相关词条</h2>
              <p class="public-header-en">ENCYCLOPEDIA</p>
              <div class="public-header-line"></div>
            </div>
            <div class="toolsListAll">
                <ul>
                    <li v-if="entryList.length == ''" style="text-align:center">
                        很抱歉，没有找到与" <span class="red">{{wordSearch}}</span>"
                    </li>
                    <li class="clear" v-for="item in entryList" :key="item.id">
                        <div class="line-title">
                            <div class="title-left">
                                <h3 class="search-highlight">{{item.name}}</h3>
                                <div class="left-line"></div>
                            </div>
                            
                        </div>
                        <div class="line-more clear">
                            <router-link to="toolList">查看更多 》</router-link>
                        </div>
                        <div class="line-content search-highlight">
                            {{item.explaination}}
                        </div>
                    </li>
                    
                </ul>
            </div>
        </div>
        <!-- 相关词条 end-->
    </div>
</template>
<script>
    export default {
        data(){
            return{
                wordSearch:'',
                // 理论工具
                theoryList:[],
                tags:[],
                //　相关词条
                entryList:[],

                
            }
        },
        methods:{
            initSearch(data){
                this.$http.entrySearch(data,(res)=>{
                    console.log(res)
                    this.entryList = res.data.entryList
                },(errRes) =>{
                    console.log(errRes)
                })
            },

            // 搜索
            search:function(){
                this.$router.push({ path: '/search-terms', query: { name: this.wordSearch }});
            },

            
            // 搜索后高亮
            searchHighLight (){
                // 获取页面h3元素（返回的是一个数组）
                // var eleArr = document.getElementsByTagName('h3')
                var eleArr = document.getElementsByClassName('search-highlight');
                console.log(eleArr)
                // 遍历数组，这里要注意的是，上面的数组并不只是只有h3的，还有别的隐藏属性也会打印出来，
                /**
                 * 打印出来四个，如果直接循环会都循环出来，会有问题，可以用节点类型来判断，
                 * nodeType = 1的为元素节点，2的好像是属性节点,详情自己去看http://www.w3school.com.cn/jsref/prop_node_nodetype.asp  我们只要元素节就行
                 * HTMLCollection(2) [h3, h3]
                 *                           0: h3 
                 *                           1: h3
                 *                           length: 2
                 *                           __proto__: HTMLCollection
                 */
                for (const key in eleArr) {
                    /**
                     * 直接打印key的话，会有 0 1 length __proto__等等
                       节点类型判断是否为元素 eleArr[key]指向h3元素
                    */ 
                    
                    if (eleArr[key].nodeType == 1) {
                        /*
                            这样就只会打印h3的元素
                            console.log(eleArr[key]) 
                        */

                        /*
                            获取innerHTML，替换要搜索的关键字
                            console.log(eleArr[key].innerHTML)
                         */

                        /*
                            replace中的正则不能直接用变量，得用对象;
                            new的第一个参数可以是变量，字符串，或者正则表达式,第二个参数是可以写g m i，要全局替换，并且不区分大小写
                         */
                        var tmpKw = '('+this.wordSearch+')'
                        // 创建正则对象
                        var regexp = new RegExp(tmpKw,'gmi')
                        /* 
                            stringObject.replace(regexp/substr,replacement)
                            $1是第一个加括号的，$2是第二个加括号的
                        */ 
                        var newStr = eleArr[key].innerHTML.replace(regexp, '<span style="color:red">$1</span>');

                        // 然后把新的字符串赋值给当前的元素
                        eleArr[key].innerHTML = newStr;
                    }
                    
                }
            } 


        },
        mounted(){
            this.wordSearch = this.$route.query.name;
            let data = {
                content:this.wordSearch
            };
            this.initSearch(data);
        },
        updated(){
            this.searchHighLight()
        }
    }
</script>
